<template>
  <u-popup v-model="show" mode="bottom" height="800" border-radius="20">
    <view class="sku-container">
      <!-- 商品信息 -->
      <view class="goods-info padding flex justify-start align-center" style="position: relative;">
        <view style="width: 180rpx;height: 180rpx;">
          <image class="goods-image" :src="goods.image" mode="aspectFill" style="width: 100%;height: 100%;"/>
        </view>
        <view class="info-right margin-left">
          <view class="price-box">
            <text class="symbol text-xl color-red">¥</text>
            <text class="price color-red" style="font-size: 48rpx;">{{ goods.price }}</text>
          </view>
          <view class="stock text-sm color-grey">
            库存{{ goods.stock }}件
          </view>
        </view>
        <u-icon name="close" @click="closePopup"
               style="position: absolute;top: 15rpx;right: 15rpx;background-color: #EDEDED;"></u-icon>
      </view>

      <!-- SKU 选项 -->
      <view class="middle padding">
        <view class="title text-sm color-black text-bold">
          {{ goods.title }}
        </view>
        <view class="bottoms flex justify-start align-center margin-top">
          <view
            v-for="(option, index) in skuOptions"
            :key="index"
            :class="['sku-option', { selected: selectedSku === option.value }]"
            @click="selectSku(option.value, option.label)"
            :style="{ 'margin-left': index === 0 ? '0' : '20rpx' }"
          >
            {{ option.label }}
          </view>
        </view>
      </view>

      <!-- 数量调整 -->
      <view class="number-box u-flex u-row-between padding">
        <text>数量</text>
        <u-number-box3
            v-model="quantity"
            :min="1"
            :max="goods.maxQuantity || goods.stock"
            @change="$emit('quantity-change', quantity)"
        ></u-number-box3>
      </view>

      <!-- 按钮 -->
      <view class="flex justify-around align-center padding" style="position:fixed;bottom: 0;width: 100%;">
        <view class="add-cart-btn" @click="$emit('add-cart', { sku: selectedSku, quantity: quantity })">
          加入购物车
        </view>
        <view class="buy-now-btn" @click="$emit('buy-now', { sku: selectedSku, quantity: quantity })">
          立即购买
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    goods: {
      type: Object,
      default: () => ({
        title: '商品名称',
        image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/sku.png',
        price: 99,
        stock: 468,
        maxQuantity: 999, // 可选，限制最大购买数量
      }),
    },
    skuOptions: {
      type: Array,
      default: () => [
        { label: '跳跳虎摆件', value: 'tiger' },
        { label: '维尼熊摆件', value: 'bear' },
      ],
    },
  },
  data() {
    return {
      quantity: 1,
      selectedSku: null,
    };
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
    closePopup() {
      this.show = false;
    },
    selectSku(value, label) {
      this.selectedSku = value;
      this.$emit('sku-selected', { value, label });
    },
  },
};
</script>

<style scoped>
.goods-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-right {
  flex: 1;
  margin-left: 20rpx;
}
.sku-option {
  width: 176rpx;
  height: 56rpx;
  border-radius: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EDEDED;
  color: #000;
}
.sku-option.selected {
  background-color: #FF1712;
  color: #ffffff;
}
.number-box {
  margin-top: 20rpx;
}
.add-cart-btn,
.buy-now-btn {
  width: 332rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}
.add-cart-btn {
  background-color: #413936;
  color: white;
}
.buy-now-btn {
  background-color: #FF625F;
  color: white;
}
</style>